import React, { Component } from 'react'
import './indexPage.less'
import { Link } from 'react-router-dom'

class IndexPage extends Component {
  constructor(props) {
    super(props)
    this.state = {
      text: '',
      english: '',
      author: '',
      allText: [
        {
          e:
            '“When you are convinced that your cause is right, have the courage to take a stand.”',
          c: '「 当你相信自己的理由是正当的，就要有勇气守住立场。」',
          author: '– 提姆·库克 (苹果执行长)'
        },
        {
          e: '“Cease to struggle and you cease to live.”',
          c: '「 停止奋斗，你就停止了生活。」',
          author: '– 汤玛斯‧卡莱尔 (作家)'
        },
        {
          e:
            '“Few things are impossible in themselves; and it is often for want of will, rather than of means, that man fails to succeed.”',
          c:
            '「 事情很少是不可能的；人们之所以不成功，与其说是条件不够，不如说是决心不够。」',
          author: '– 法兰索瓦·德·拉罗希福可 (作家)'
        },
        {
          e:
            '“If you have great talents, industry will improve them; if you have but moderate abilities, industry will supply their deficiency.”',
          c:
            '「 如果你很有天赋，勤勉会使其更加完善；如果你能力一般，勤勉会补足其缺陷。」',
          author: '– 约书亚·雷诺兹 (画家)'
        }
      ]
    }
  }

  componentDidMount() {
    let i = Math.floor(Math.random() * 4)
    this.setState({
      text: this.state.allText[i].c,
      english: this.state.allText[i].e,
      author: this.state.allText[i].author
    })
  }

  render() {
    return (
      <div className="indexPage moveIn">
        <div className="indexPage_cover"></div>
        <div className="indexPage_title">
          <p
            className="indexPage_title_cn"
            dangerouslySetInnerHTML={{ __html: this.state.text }}
          ></p>
          <p
            className="indexPage_title_en"
            dangerouslySetInnerHTML={{ __html: this.state.english }}
          ></p>
          <p
            className="indexPage_title_author"
            dangerouslySetInnerHTML={{ __html: this.state.author }}
          ></p>
          <div className="indexPage_jump">
            <Link to="/about">关于此站</Link>
            <Link to="/blog">进入博客</Link>
          </div>
        </div>
      </div>
    )
  }
}

export default IndexPage
